/*
 * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-vsc-dark-plus.css
 */

/* stylelint-disable selector-max-class */

$code-text-color: #d4d4d4;
$code-bg-color: #1e1e1e;

@mixin style {
  div[class*='language-'] pre {
    ::selection {
      background: #264f78;
    }
  }

  .namespace {
    opacity: 0.7;
  }

  .token.doctype {
    .token.doctype-tag {
      color: #569cd6;
    }

    .token.name {
      color: #9cdcfe;
    }
  }

  .token.comment,
  .token.prolog {
    color: #6a9955;
  }

  .token.punctuation {
    &,
    .language-html .language-css &,
    .language-html .language-javascript & {
      color: #d4d4d4;
    }

    &.interpolation-punctuation {
      color: #569cd6;
    }
  }

  .token.number,
  .token.symbol,
  .token.inserted,
  .token.unit {
    color: #b5cea8;
  }

  .token.string,
  .token.char,
  .token.builtin,
  .token.deleted {
    color: #ce9178;
  }

  .token.operator {
    color: #d4d4d4;

    &.arrow {
      color: #569cd6;
    }
  }

  .token.atrule {
    color: #ce9178;

    .token.rule {
      color: #c586c0;
    }

    .token.url {
      color: #9cdcfe;

      .token.function {
        color: #dcdcaa;
      }

      .token.punctuation {
        color: #d4d4d4;
      }
    }
  }

  .token.keyword {
    color: #569cd6;

    &.module,
    &.control-flow {
      color: #c586c0;
    }
  }

  .token.function,
  .token.function .token.maybe-class-name {
    color: #dcdcaa;
  }

  .token.regex {
    color: #d16969;
  }

  .token.important {
    color: #569cd6;
  }

  .token.italic {
    font-style: italic;
  }

  .token.constant {
    color: #9cdcfe;
  }

  .token.class-name,
  .token.maybe-class-name {
    color: #4ec9b0;
  }

  .token.console {
    color: #9cdcfe;
  }

  .token.parameter {
    color: #9cdcfe;
  }

  .token.interpolation {
    color: #9cdcfe;
  }

  .token.boolean {
    color: #569cd6;
  }

  .token.property,
  .token.variable,
  .token.imports .token.maybe-class-name,
  .token.exports .token.maybe-class-name {
    color: #9cdcfe;
  }

  .token.selector {
    color: #d7ba7d;
  }

  .token.escape {
    color: #d7ba7d;
  }

  .token.tag {
    color: #569cd6;

    .token.punctuation {
      color: #808080;
    }
  }

  .token.cdata {
    color: #808080;
  }

  .token.attr-name {
    color: #9cdcfe;
  }

  .token.attr-value,
  .token.attr-value .token.punctuation {
    color: #ce9178;
  }

  .token.attr-value .token.punctuation.attr-equals {
    color: #d4d4d4;
  }

  .token.entity {
    color: #569cd6;
  }

  .token.namespace {
    color: #4ec9b0;
  }

  pre[class*='language-javascript'],
  code[class*='language-javascript'],
  pre[class*='language-jsx'],
  code[class*='language-jsx'],
  pre[class*='language-typescript'],
  code[class*='language-typescript'],
  pre[class*='language-tsx'],
  code[class*='language-tsx'] {
    color: #9cdcfe;
  }

  pre[class*='language-css'],
  code[class*='language-css'] {
    color: #ce9178;
  }

  pre[class*='language-html'],
  code[class*='language-html'] {
    color: #d4d4d4;
  }

  .language-regex .token.anchor {
    color: #dcdcaa;
  }

  .language-html .token.punctuation {
    color: #808080;
  }

  .language-css .token.string.url {
    text-decoration: underline;
  }
}
